<template>
  <div class="container">
    <el-card class="box-card" shadow="hover" v-for="item in listItemForm" :key="item.index">
      <div slot="header" class="clearfix">
        <div class="serialNumber">
          设备SN：{{ item.sn }}
        </div>
        <div class="orderStatus transferred">
          {{ item.isPay === false ? "未到账" : "已到账" }}
        </div>
      </div>
      <div class="details">
        <div class="createTime">
          <span>订单时间：</span>
          <span>{{ item.createTime }}</span>
        </div>
        <div class="orderId">
          <span>订单号：</span>
          <span>{{ item.logisticsOrderNo }}</span>
        </div>
        <div class="expCompany">
          <span>物流公司：</span>
          <span>{{ item.logisticsCompany }}</span>
        </div>
        <div class="expOrderId">
          <span>运单号：</span>
          <span>19300969816481</span>
        </div>
      </div>
      <div class="amount" v-if="item.isPay === true">
        <span style="opacity: .7;">提现金额：</span>
        <span style="font-weight: bold;">500.00</span>
      </div>
    </el-card>
    <!--<el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <div class="serialNumber">
          设备SN：FPAL11920010152TZH1261
        </div>
        <div class="orderStatus onSend">
          已寄出
        </div>
      </div>
      <div class="details">
        <div class="createTime">
          <span>订单时间：</span>
          <span>2020-09-22</span>
        </div>
        <div class="orderId">
          <span>订单号：</span>
          <span>1930096981648196703</span>
        </div>
        <div class="expCompany">
          <span>物流公司：</span>
          <span>圆通速递</span>
        </div>
        <div class="expOrderId">
          <span>运单号：</span>
          <span>19300969816481</span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <div class="serialNumber">
          设备SN：FPAL11920010152TZH1261
        </div>
        <div class="orderStatus received">
          已签收
        </div>
      </div>
      <div class="details">
        <div class="createTime">
          <span>订单时间：</span>
          <span>2020-09-22</span>
        </div>
        <div class="orderId">
          <span>订单号：</span>
          <span>1930096981648196703</span>
        </div>
        <div class="expCompany">
          <span>物流公司：</span>
          <span>圆通速递</span>
        </div>
        <div class="expOrderId">
          <span>运单号：</span>
          <span>19300969816481</span>
        </div>
      </div>
      <div class="amount">
        <span class="remark">备注：设备损坏无法使用，无返佣</span>
      </div>
    </el-card>-->
  </div>
</template>

<script>
import {getWithdrawList} from '@/api/withdrawLog'

export default {
  name: "orderList",
  data() {
    return {
      listItemForm: ""
    }
  },
  created() {
    const that = this
    getWithdrawList(this.$store.state.token).then(res => {
      that.listItemForm = res.data.data
    }).catch((err) => {
      this.$notify.error({
        title: '错误',
        message: err,
        showClose: false,
        duration: 1000
      });
    })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 0;
  height: calc(100vh - 118px);
}

.box-card {
  width: 100%;

  .clearfix {
    color: #1e2431;
    font-weight: bold;
    font-size: 13px;
    display: flex;
    justify-content: space-between;

    .serialNumber {
      position: relative;

      &::before {
        content: '';
        display: block;
        position: absolute;
        left: -16px;
        top: 50%;
        transform: translateY(-50%);
        height: 16px;
        width: 5px;
        background: linear-gradient(to bottom, rgba(253, 110, 5, .4), rgba(253, 110, 5, .8))
      }
    }
  }
}

.transferred {
  color: #333;
  opacity: .6;
}

.onSend {
  color: #fd6e05;
  opacity: 1;
}

.received {
  color: #333;
  opacity: 1;
}

.el-card {
  box-sizing: border-box;
  padding: 0 16px;
  border: 0;
  margin-bottom: 14px;

  & > > > .el-card__header {
    padding: 14px 0;
  }

  & > > > .el-card__body {
    padding: 0;
  }

  .details {
    opacity: .7;
    padding: 12px 0;

    div {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      line-height: 28px;
    }
  }

  .amount {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 14px;
    border-top: 1px solid #EBEEF5;

    .remark {
      width: 100%;
      height: 100%;
      padding: 4px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(253, 110, 5, 0.05);
      border-radius: 2px;
      color: rgba(30, 36, 49, .7);
      font-size: 13px;
    }
  }
}

.themeButton {
  width: 100%;
  height: 42px;
  margin-top: 16px;
  color: #fff;
  opacity: 1;
  background: linear-gradient(90deg, rgba(253, 110, 5, 0.66) 10%, #fd6e05 81%);
  border-radius: 21px;
  border: none;
  transition: all .5s ease;

  &:hover,
  &:active {
    filter: brightness(1.1);
    box-shadow: 0 7px 25px 0 rgba(253, 110, 5, 0.41);
  }
}

</style>
